<template>
  <div>
    <el-dialog
      :title="this.title"
      :close-on-click-modal="false"
      :visible.sync="visible"
      @close="clearSearch"
      width="920px"
    >
      <el-form
        :inline="true"
        :model="formSelect"
        class="demo-form-inline"
        style="margin-left: 50px"
      >
        <el-form-item label="隶属部门" prop="number">
          <el-select
            size="small"
            v-model="formSelect.departmentName"
            clearable
            placeholder="隶属部门"
          >
            <el-option
              :key="item.departmentNumber"
              v-for="item in parent"
              :label="item.departmentName"
              :value="item.departmentNumber"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="姓名" prop="name" style="margin-left: 100px">
          <el-input
            size="small"
            v-model="formSelect.name"
            clearable
            placeholder
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="getDataList()"
            icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>

      <el-transfer
        style="margin-left: 60px"
        :titles="['未分配', '已分配']"
        v-model="value"
        :data="teacherData"
        @change="handleChange"
      ></el-transfer>

      <span slot="footer" class="dialog-footer">
        <!-- <el-button size="small" @click="visible = false">取消</el-button> -->
        <el-button size="small" type="primary" @click="Submit()"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  // getRoleAuthority,
  // getAllAuthority,updataRole
  getTeacheData,
  addTeacherRole,
  deleteTeacherRole,
} from '../../api/src/system/role'

import { getListData } from '../../api/src/archives_server/faculty_archives'
import Cookies from 'js-cookie'
export default {
  name: 'roleDistribution',
  data() {
    return {
      visible: false,
      roleId: '',
      title: '',
      formSelect: {
        departmentNumber: '',
        departmentName: '',
        name: '',
      },
      parent: [],
      teacherData: [],
      value: [],
    }
  },
  created() {
    this.getInputList()
    // console.log(this.teacherData)
  },
  methods: {
    async init(row) {
      this.roleId = row.id
      this.title = '角色分配 - ' + row.name
      this.getDataList()
      this.visible = true
    },
    async getDataList() {
      this.teacherData = []
      this.value = []

      var parameter
      var parameter2

      if (this.formSelect.departmentName.length != 0) {
        parameter =
          'currentPage=1&pageSize=-1&roleId=' +
          this.roleId +
          '&department=' +
          this.formSelect.departmentName
        parameter2 =
          'currentPage=1&pageSize=-1&isBelong=true&roleId=' +
          this.roleId +
          '&department=' +
          this.formSelect.departmentName
      }
      if (this.formSelect.name.length != 0) {
        parameter =
          'currentPage=1&pageSize=-1&roleId=' +
          this.roleId +
          '&name=' +
          this.formSelect.name
        parameter2 =
          'currentPage=1&pageSize=-1&isBelong=true&roleId=' +
          this.roleId +
          '&name=' +
          this.formSelect.name
      }

      if (
        this.formSelect.name.length != 0 &&
        this.formSelect.departmentName.length != 0
      ) {
        parameter =
          'currentPage=1&pageSize=-1&roleId=' +
          this.roleId +
          '&name=' +
          this.formSelect.name +
          '&department=' +
          this.formSelect.departmentName
        parameter2 =
          'currentPage=1&pageSize=-1&isBelong=true&roleId=' +
          this.roleId +
          '&name=' +
          this.formSelect.name +
          '&department=' +
          this.formSelect.departmentName
      }

      if (
        this.formSelect.departmentName.length == 0 &&
        this.formSelect.name.length == 0
      ) {
        parameter = 'currentPage=1&pageSize=-1&roleId=' + this.roleId
        parameter2 =
          'currentPage=1&pageSize=-1&isBelong=true&roleId=' + this.roleId
      }

      await getTeacheData(parameter).then((res) => {
        // res.records.length
        for (var i = 0; i < res.records.length; i++) {
          this.teacherData.push({
            key: res.records[i].id,
            label: res.records[i].name, //+ ' — ' + res.records[i].departmentName
            disabled: res.records[i].number == Cookies.get('username'),
          })
        }
      })
      await getTeacheData(parameter2).then((res) => {
        for (var i = 0; i < res.records.length; i++) {
          this.value.push(res.records[i].id)
        }
      })
    },
    // 表单提交
    Submit() {
      this.visible = false
    },
    handleChange(value, direction, movedKeys) {
      if (direction.length > 1) {
        for (var i = 0; i < movedKeys.length; i++) {
          // 多个移动
          if (direction == 'right') {
            addTeacherRole(movedKeys[i], this.roleId).then((res) => {
              // deleteTeacherRole
            })
          } else {
            deleteTeacherRole(movedKeys[i], this.roleId).then((res) => {})
          }
        }
      } else {
        var obj = JSON.parse(movedKeys)
        // 单个移动
        if (direction == 'right') {
          addTeacherRole(obj, this.roleId).then((res) => {
            deleteTeacherRole
          })
        } else {
          deleteTeacherRole(obj, this.roleId).then((res) => {})
        }
      }
    },
    getInputList() {
      getListData().then((res) => {
        this.parent = res
      })
    },
    clearSearch() {
      this.formSelect.name = ''
      this.formSelect.departmentName = ''
    },
  },
}
</script>

<style>
.el-dialog {
}
.el-transfer-panel {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
  display: inline-block;
  vertical-align: middle;
  width: 280px;
  max-height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
</style>
